<template>
  <div>
    <Row :gutter="16">
      <Col span="24">
        <table-select-common
            ref="tableSelect" v-model="selectedRoles" :columns="columns" :items="items"
            :total-count="totalCount" placeholder="在角色名称、角色描述中搜索" @on-change="getPage" :tag-show="true"
            display-property="displayName"
            :page-size="pageSize" :optional="optional"
            tag-color="success" :multi-select="true" :loading="$store.state.role.loading">
        </table-select-common>
      </Col>
    </Row>

  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import TableSelectCommon from '@/components/select/table-select-common.vue';

@Component({
  components: {TableSelectCommon},
})
export default class RoleSelect extends AbpBase {
  name: string = 'RoleSelect';


  @Prop({type: Array, default: () => []}) value: any[];
  @Prop({type: Object, default:null}) additional: any;

  selectedRoles: any[] = [];
  pageSize: number = 10;

  optional: any[] = [
    {
      key: 'startTime', value: '1900-01-01 00:00:00'
    }, {
      key: 'endTime', value: '2099-12-31 23:59:59'
    }, {
      key: 'isStatic', value: []
    }, {
      key: 'isDefault', value: []
    }
  ];
  columns = [
    {
      type: 'selection',
      width: 60,
      align: 'center',
    },
    {
      title: '角色名',
      key: 'displayName',
      width: 180,
      align: 'center',
      sortable: this.$config.sorting.administration.role,
      ellipsis: true,
      tooltipTheme: 'dark',
      tooltip: true,
      resizable: true,
    },
    {
      title: '系统',
      key: 'isStatic',
      width: 100,
      align: 'center',
      render: (h: any, params: any) => {
        if (params.row.isStatic) {
          return h('Icon', {
            props: {
              size: 20,
              color: '#19be6b',
              type: 'pandx fa fa-flag',
            },
          }, []);
        } else {
          return h('Icon', {
            props: {
              size: 20,
              color: '#c5c8ce',
              type: 'pandx fa fa-flag',
            },
          }, [])
        }
      },
      filters: [
        {
          label: '是',
          value: true,
        }, {
          label: '否',
          value: false,
        },
      ],
      filterRemote: (array) => {
        const index = this.optional.findIndex((item) => {
          return item.key === 'isStatic';
        });
        if (index !== -1) {
          this.optional.splice(index, 1);
        }
        this.optional.push({key: 'isStatic', value: array})
      },
      ellipsis: true,
      tooltipTheme: 'dark',
      tooltip: true,
      resizable: true,
    },
    {
      title: '默认',
      key: 'isDefault',
      width: 100,
      align: 'center',
      render: (h: any, params: any) => {
        if (params.row.isDefault) {
          return h('Icon', {
            props: {
              size: 20,
              color: '#19be6b',
              type: 'pandx fa fa-flag',
            },
          }, []);
        } else {
          return h('Icon', {
            props: {
              size: 20,
              color: '#c5c8ce',
              type: 'pandx fa fa-flag',
            },
          }, [])
        }
      },
      filters: [
        {
          label: '是',
          value: true,
        }, {
          label: '否',
          value: false,
        },
      ],
      filterRemote: (array) => {
        const index = this.optional.findIndex((item) => {
          return item.key === 'isDefault';
        });
        if (index !== -1) {
          this.optional.splice(index, 1);
        }
        this.optional.push({key: 'isDefault', value: array})
      },
      ellipsis: true,
      tooltipTheme: 'dark',
      tooltip: true,
      resizable: true,
    },
    {
      title: '角色描述',
      key: 'description',
      align: 'center',
      minWidth: 240,
      ellipsis: true,
      tooltipTheme: 'dark',
      tooltip: true,
      resizable: true,
    },
  ];

  @Watch('selectedRoles')
  selectedRolesChange(newVal) {
    this.$emit('input', newVal);
  }



  get totalCount() {
    return this.$store.state.role.pagedRoles.totalCount;
  }

  get items() {
    return this.$store.state.role.pagedRoles.items;
  }



  async init() {
    await this.getPage({
      sorting: '',
      filter: '',
      maxResultCount: this.pageSize,
      skipCount: 0,
      startTime: '1900-01-01 00:00:00',
      endTime: '2099-12-31 23:59:59',
      isStatic: [],
      isDefault: [],
    });
  }

  async getPage(args) {
    await this.$store.dispatch({
      type: 'role/obtainPagedRoles',
      data: args,
    });
  }



  async created() {
    await this.init();
  }
}
</script>

<style lang="less" scoped>

</style>
